<template>
  <uni-drawer ref="showRight" mode="right" :mask-click="false" :width="1000">
    <scroll-view
      style="height: 100%"
      scroll-y="true"
      @scrolltolower="handleScrollToLower"
    >
      <view class="layout">
        <view class="head">
          <view class="left">
            <uni-data-select
              class="selectBox"
              ref="selectRef"
              collection="dc-bizhi-classify"
              field="_id as value, name as text ,sort"
              :where="`enable==true`"
              orderby="sort asc"
              clear
              v-model="params.classid"
              @change="handleClassifyChange"
            ></uni-data-select>
            <uni-easyinput
              class="search"
              @clear="handleClear"
              v-model="params.keyword"
              @confirm="handleSearch"
              type="text"
              placeholder="请输入搜索内容"
            />
            <view class="total"
              >共{{ params.count }}张,已选择<text class="num">{{
                props.selectList.length
              }}</text
              >张</view
            >
          </view>
          <view class="right"
            ><view class="operate-btn">
              <button type="primary" size="mini" @click="handleSave">
                完成
              </button>
              <button type="warn" size="mini" @click="closeDrawer">关闭</button>
            </view></view
          >
        </view>
        <view class="main">
          <view class="item" v-for="(item, index) in picList" :key="item._id">
            <view class="pic">
              <image
                :src="getSmallImage(item.picurl)"
                mode="aspectFill"
              ></image>
              <view
                class="select"
                :class="{
                  active: selectList.some((s) => s && s._id === item._id),
                }"
                @click="handleSelect(index)"
              >
                <checkbox value="1" :checked="true" />
              </view>
            </view>
            <view class="look" @click="handleLook(index)">
              <uni-icons type="eye" size="22" color="#3c9cff" />
            </view>
          </view>
        </view>
        <view class="paging">
          <uni-load-more :status="noData ? 'noMore' : 'loading'" />
        </view>
      </view>
    </scroll-view>
  </uni-drawer>
</template>
<script setup>
import { ref } from 'vue';
import { showToast } from '@/utils/common';
import { getSmallImage } from '@/utils/tools';
const props = defineProps({
  selectList: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(['update:selectList']);
const showRight = ref(null);
const selectRef = ref(null);
const picCloudObj = uniCloud.importObject('admin-bizhi-picture', {
  customUI: true,
});
const params = ref({
  pageSize: 40,
  currentPage: 1,
  classid: '',
  keyword: '',
  count: 0,
});

const picList = ref([]);
const noData = ref(false);
const handleClassifyChange = (e) => {
  init();
};
const closeDrawer = () => {
  showRight.value.close();
  if (params.value.classid) {
    selectRef.value.clearVal();
  }
  params.value.keyword = '';
  params.value.classid = '';
  params.value.currentPage = 1;
  picList.value = [];
  noData.value = false;
};
const openDrawer = async () => {
  init();
  showRight.value.open();
};

const getList = async () => {
  const res = await picCloudObj.search(params.value);
  if (res.errCode == 0) {
    picList.value = [...picList.value, ...res.data];
    params.value.count = res.count;
    if (params.value.pageSize > res.data.length) {
      noData.value = true;
    }
  } else {
    showToast({
      title: res.errMsg,
    });
  }
};

const handleSave = () => {
  closeDrawer();
};
const handleScrollToLower = () => {
  if (noData.value) {
    return;
  }
  params.value.currentPage++;
  getList();
};

const handleSearch = () => {
  init();
};

const handleClear = () => {
  params.value.keyword = '';
  init();
};

const handleLook = (index) => {
  let urls = picList.value.map((item) => item.picurl);
  uni.previewImage({
    urls: urls,
    current: urls[index],
  });
};

const init = () => {
  picList.value = [];
  params.value.currentPage = 1;
  noData.value = false;
  getList();
};

const handleSelect = (index) => {
  let list = [...props.selectList];
  if (list.some((s) => s && s._id === picList.value[index]._id)) {
    list = list.filter((item) => item._id !== picList.value[index]._id);
  } else {
    list.push(picList.value[index]);
  }
  emit('update:selectList', list);
};

defineExpose({
  openDrawer,
});
</script>
<style lang="scss" scoped>
.layout {
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 12;
    width: 100%;
    .left {
      display: flex;
      align-items: center;
      gap: 10px;
      .selectBox {
        width: 200px;
      }
      .search {
        width: 200px;

        height: 35px;
        box-sizing: border-box;

        font-size: 14px;
        :deep(.is-input-border) {
          height: 100%;
        }
      }
      .total {
        font-size: 12px;
        color: #888;
        .num {
          color: #007aff;
          font-weight: 600;
        }
      }
    }
    .right {
      display: flex;
    }
  }
  .main {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    .item {
      width: 100%;
      aspect-ratio: 9/16;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      cursor: pointer;
      .pic {
        width: 100%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
        }
        .select {
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          border: 4px solid rgba(220, 220, 220, 0.6);
          z-index: 10;
          checkbox {
            position: absolute;
            top: 6px;
            left: 6px;
            display: none;
          }
        }
        .select.active {
          border-color: #007aff;
          background-color: rgba(60, 156, 255, 0.3);
          checkbox {
            display: block;
          }
        }
      }
      .look {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        background-color: #fff;
        border-radius: 50%;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 11;
      }
    }
    .item:hover .look {
      display: flex;
    }
  }
}
</style>
